<template>
	<div v-if="value.form && value.form[form.field]">
		<span v-if="form.datas && form.datas.length > 0">
			<span style="margin:2px;" v-for="(v, k) in getFormValues(form.datas,value.form[form.field])" :class="'h-tag '+ $global.tagColor[k%4]">{{v}}</span>
		</span>
		<TextEllipsis v-else-if="form.url && jsonDatas[form.field] && jsonDatas[form.field][value.id]" class="textellipsis" :text="jsonDatas[form.field][value.id]" :height="80" v-width="250" :isLimitHeight="isLimitHeight[value.id] == 1 ? false : true">
			<template slot="more"><span>...</span><span class="link" @click="limitHeight(value.id)">查看更多</span></template>
			<span slot="after" class="link" v-if="isLimitHeight[value.id] == 1" @click="limitHeight(value.id)">收起</span>
		</TextEllipsis>
		<img v-else-if="form.type == 'uploads'" :src="value.form[form.field]" class="tableimg" @click="$ImagePreview(value.form[form.field])" @error="$imageError">
		<span v-else>{{value.form[form.field]}}</span>
	</div>
</template>

<script>
	var Datas = {}
	import md5 from 'js-md5'
	export default {
		props: {
			value: Object,
			form: Object
		},
		data() {
			return {
				jsonDatas: {},
				isLimitHeight: []
			}
		},
		mounted() {
			if (this.form.url 
			&& this.value.form 
			&& this.value.form[this.form.field] 
			&& ((Array.isArray(this.value.form[this.form.field]) && this.value.form[this.form.field].length > 0) 
			|| (!Array.isArray(this.value.form[this.form.field]) && this.value.form[this.form.field]))
			){
				let key = md5(this.form.url)
				if (Datas[key]){
					if(Datas[key].loading){
						setTimeout(()=>{
							this.getJsonDatas(key, this.value.form[this.form.field], this.form.field, this.value.id)
						},1000)
					}else{
						this.getJsonDatas(key, this.value.form[this.form.field], this.form.field, this.value.id)
					}
				}else{
					this.loadJson(key,this.form.url)
					Datas[key] = {loading:true}
					setTimeout(()=>{
						this.getJsonDatas(key, this.value.form[this.form.field], this.form.field, this.value.id)
					},1000)
				}
			}
		},
		methods: {
			limitHeight(id) {
				this.$set(this.isLimitHeight, id, this.isLimitHeight[id] > 0 ? 0 : 1)
			},
			getFormValues(datas, value) {
				let data = this.$global.getArrayName(datas, value)
				if (Array.isArray(data)) {
					return data
				} else {
					return data ? [data] : []
				}
			},
			async loadJson(key,url) {
				if (!Datas[key]) {
					Datas[key] = JSON.stringify(this.$global.http('GET',url))
				}
			},
			getJsonText(key,id,full=false){
				let start,end,name,desc = -1
				let nameend,namedata,descdata,descend = ''
				start = Datas[key].indexOf('{"id":' + id + ',')
				end = Datas[key].indexOf('}',start)
				name = Datas[key].indexOf('"name":"', start)
				if(name > 0 && name < end){
					nameend = Datas[key].indexOf('"', name + 8)
					namedata = Datas[key].substring(name + 8, nameend)
				}
				desc = Datas[key].indexOf('"desc":"', start)
				if (desc > 0 && desc < end) {
					descend = Datas[key].indexOf('"', desc + 8)
					descdata = Datas[key].substring(desc + 8, descend)
				}
				let text = (namedata ? namedata : '') + (descdata ? ' ' + descdata : '')
				if(full){
					let left = Datas[key].lastIndexOf('[', start)
					let right = Datas[key].lastIndexOf(']', start)
					let last = Datas[key].substring(Datas[key].lastIndexOf('{'))
					let len = (last.length - last.indexOf('}'))/2
					for (var i = 0; i < 10; i++) {
						if(left > right && len > 1){
							let nameleft = Datas[key].lastIndexOf('"name":"', left)
							let nameright = Datas[key].indexOf('"', nameleft+8)
							let fname = Datas[key].substring(nameleft+8, nameright)
							text = fname + '/' + text
							len--
						}
						start = Datas[key].lastIndexOf('{',left)
						left = Datas[key].lastIndexOf('[', start)
						right = Datas[key].lastIndexOf(']', start)
					}
				}
				if(namedata || descdata){
					return text
				}
			},
			getJsonDatas(key, value, field, id) {
				if(Datas[key]){
					let arrs = []
					if(Array.isArray(value)){
						value.forEach(v => {
							let text = this.getJsonText(key,v)
							if(text){
								arrs.push(text)
							}
						})
					}else{
						let text = this.getJsonText(key,value,true)
						if(text){
							arrs.push(text)
						}
					}
					let temp = {}
					temp[field] = this.jsonDatas[field] || {}
					temp[field][id] = arrs.join(';\n')
					if(temp[field][id].length < 30){
						temp[field][id] = arrs.join('; ')
					}
					this.jsonDatas = Object.assign({},this.jsonDatas,temp)
				}else{
					setTimeout(()=>{
						this.getJsonDatas(key, value, field, id)
					},1000)
				}
			}
		}
	}
</script>

<style lang='less'>
	.textellipsis {
		padding: 0 5px;
		text-align: left !important;
		.h-text-ellipsis-limit-text {
			white-space: pre-wrap;
		}
	}
</style>
